<form method="post" action="{{ url(action) }}" class="
    {{- action == '/table/create' ? 'create_table_form' : 'append_fields_form' }} ajax lock-page">
    {{ get_hidden_inputs(form_params) }}
    {# happens when an index has been set on a column #}
    {# and a column is added to the table creation dialog #}
    {# This contains a JSON-encoded string #}
    <input type="hidden" name="primary_indexes" value="
        {{- primary_indexes is not empty ? primary_indexes : '[]' }}">
    <input type="hidden" name="unique_indexes" value="
        {{- unique_indexes is not empty ? unique_indexes : '[]' }}">
    <input type="hidden" name="indexes" value="
        {{- indexes is not empty ? indexes : '[]' }}">
    <input type="hidden" name="fulltext_indexes" value="
        {{- fulltext_indexes is not empty ? fulltext_indexes : '[]' }}">
    <input type="hidden" name="spatial_indexes" value="
        {{- spatial_indexes is not empty ? spatial_indexes : '[]' }}">

    {% if action == '/table/create' %}
        <div id="table_name_col_no_outer">
            <span>
                {{ t('Table name') }}:
                <input type="text"
                    name="table"
                    size="40"
                    maxlength="64"
                    value="{{ table is defined ? table }}"
                    class="textfield" autofocus required>
            </span>
            <span>
                {{ t('Add') }}
                <input type="number"
                    id="added_fields"
                    name="added_fields"
                    size="2"
                    value="1"
                    min="1"
                    onfocus="this.select()">
                {{ t('column(s)') }}
                <input class="btn btn-secondary" type="button"
                    name="submit_num_fields"
                    value="{{ t('Go') }}">
            </span>
        </div>
    {% endif %}
    {% if content_cells is iterable %}
        {% include 'columns_definitions/table_fields_definitions.twig' with {
            'is_backup': is_backup,
            'fields_meta': fields_meta,
            'relation_parameters': relation_parameters,
            'content_cells': content_cells,
            'change_column': change_column,
            'is_virtual_columns_supported': is_virtual_columns_supported,
            'server_version': server_version,
            'browse_mime': browse_mime,
            'supports_stored_keyword': supports_stored_keyword,
            'max_rows': max_rows,
            'char_editing': char_editing,
            'attribute_types': attribute_types,
            'privs_available': privs_available,
            'max_length': max_length,
            'charsets': charsets
        } only %}
    {% endif %}
    {% if action == '/table/create' %}
        <div class="responsivetable">
        <table class="table table-borderless w-auto align-middle mb-0">
            <tr class="align-top">
                <th>{{ t('Table comments:') }}</th>
                <td width="25">&nbsp;</td>
                <th>{{ t('Collation:') }}</th>
                <td width="25">&nbsp;</td>
                <th>
                    {{ t('Storage Engine:') }}
                    {{ show_mysql_docu('Storage_engines') }}
                </th>
                <td width="25">&nbsp;</td>
                <th id="storage-engine-connection">
                    {{ t('Connection:') }}
                    {{ show_mysql_docu('federated-create-connection') }}
                </th>
            </tr>
            <tr>
                <td>
                  <textarea 
                    name="comment" 
                    maxlength="2048" 
                    class="textfield" 
                    rows="1"
                    cols="30">{{ comment is defined ? comment }}</textarea>
                </td>
                <td width="25">&nbsp;</td>
                <td>
                  <select lang="en" dir="ltr" name="tbl_collation">
                    <option value=""></option>
                    {% for charset in charsets %}
                      <optgroup label="{{ charset.name }}" title="{{ charset.description }}">
                        {% for collation in charset.collations %}
                          <option value="{{ collation.name }}" title="{{ collation.description }}"
                            {{- collation.name == tbl_collation ? ' selected' }}>
                            {{- collation.name -}}
                          </option>
                        {% endfor %}
                      </optgroup>
                    {% endfor %}
                  </select>
                </td>
                <td width="25">&nbsp;</td>
                <td>
                  <select class="form-select" name="tbl_storage_engine" aria-label="{{ t('Storage engine') }}">
                    {% for engine in storage_engines %}
                      <option value="{{ engine.name }}"{% if engine.comment is not empty %} title="{{ engine.comment }}"{% endif %}
                        {{- engine.name|lower == tbl_storage_engine|lower or (tbl_storage_engine is empty and engine.is_default) ? ' selected' }}>
                        {{- engine.name -}}
                      </option>
                    {% endfor %}
                  </select>
                </td>
                <td width="25">&nbsp;</td>
                <td>
                    <input type="text"
                        name="connection"
                        size="40"
                        value="{{ connection is defined ? connection }}"
                        placeholder="scheme://user_name[:password]@host_name[:port_num]/db_name/tbl_name"
                        class="textfield"
                        required>
                </td>
            </tr>
            {% if have_partitioning %}
                <tr class="align-top">
                    <th colspan="5">
                        {{ t('PARTITION definition:') }}
                        {{ show_mysql_docu('Partitioning') }}
                    </th>
                </tr>
                <tr>
                    <td colspan="5">
                        {% include 'columns_definitions/partitions.twig' with {
                          'partition_details': partition_details,
                          'storage_engines': storage_engines
                        } only %}
                    </td>
                </tr>
            {% endif %}
        </table>
        </div>
    {% endif %}
    <div class="card mt-3">
      <div class="card-body">
        {% if action == '/table/add-field' or action == '/table/structure/save' %}
            <input type="checkbox" name="online_transaction" value="ONLINE_TRANSACTION_ENABLED" />{{ t('Online transaction', context = 'Online transaction part of the SQL DDL for InnoDB') }}{{ show_mysql_docu('innodb-online-ddl') }}
        {% endif %}
        <input class="btn btn-secondary preview_sql" type="button"
            value="{{ t('Preview SQL') }}">
        <input class="btn btn-primary" type="submit"
            name="do_save_data"
            value="{{ t('Save') }}">
      </div>
    </div>
    <div id="properties_message"></div>
     {% if is_integers_length_restricted %}
        <div class="alert alert-primary" id="length_not_allowed" role="alert">
            {{ get_image('s_notice') }}
            {{ t('The column width of integer types is ignored in your MySQL version unless defining a TINYINT(1) column') }}
            {{ show_mysql_docu('', false, 'https://dev.mysql.com/doc/relnotes/mysql/8.0/en/news-8-0-19.html') }}
        </div>
     {% endif %}
</form>
<div class="modal fade" id="previewSqlModal" tabindex="-1" aria-labelledby="previewSqlModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewSqlModalLabel">{{ t('Loading') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="previewSQLCloseButton" data-bs-dismiss="modal">{{ t('Close') }}</button>
      </div>
    </div>
  </div>
</div>

{# Used by add new column of type ENUM/SET #}
{{ include('modals/enum_set_editor.twig') }}
